<template>
    <div class="Editor">
        <div ref="editor" style="text-align:left"></div>
        <el-button type="primary" @click="getContent">提交上传</el-button>
    </div>
</template>
<script>
import E from 'wangeditor'
export default {
    name: 'editor',
    data() {
        return {
            editorContent: ''
        }
    },
    methods: {
        getContent() {
            alert(this.editorContent)
        }
    },
    mounted() {
        var editor = new E(this.$refs.editor)
        editor.customConfig.menus = [
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'link', // 插入链接
            'list', // 列表
            'justify', // 对齐方式
            'quote', // 引用
            'emoticon', // 表情
            'image', // 插入图片
            'table', // 表格
            // 'video', // 插入视频
            // 'code', // 插入代码
            'undo', // 撤销
            'redo' // 重复
        ]
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = '/upload'

        editor.customConfig.uploadImgHooks = {
            // error: function (xhr, editor) {
            //     // 图片上传出错时触发
            //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            // },
            // timeout: function (xhr, editor) {
            //     // 图片上传超时时触发
            //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            // },

            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url = result.url
                insertImg(url)
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }

        editor.customConfig.onchange = (html) => {
            this.editorContent = html
        }
        editor.create()
    }
}
</script>
<style>
.Editor .el-button {
    margin-top: 20px;
}
</style>